<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯物质物性</title>
    <link rel="stylesheet" href="style.css">
    <script src="./coolprop.js"></script>
</head>
<body>
    <div id="input-form">
        <p>
        介&ensp;质：
        <input id="fluidName"type="text" placeholder="输入名称" list="fluidName-datalist">
        <datalist id="fluidName-datalist"></datalist>
        </p>
        <p>
        参数1：
        <select id="arg1"></select>
        <input id="arg1-value" type="number">
        <select id="arg1-unit" hidden></select>
        </p>
        <p>
        参数2：
        <select id="arg2" disabled></select>
        <input id="arg2-value" type="number">
        <select id="arg2-unit" hidden></select>
        </p>
        <button id="cal">运算</button>
    </div> 

    <div id="res"></div>

    <script type="module">
        import props from "./props.js"
        import * as Unit from "./unitConverter.js"
        import unitConverter from "./unitConverter.js"
        import param from "./parameter.js";
  
        const fluidNameList = [
                "Acetone","Air","Ammonia","Argon","Benzene","CarbonDioxide","CarbonMonoxide","CarbonylSulfide","CycloHexane","CycloPropane","Cyclopentane","D4","D6","Deuterium","DiethylEther","DimethylCarbonate","DimethylEther","Ethane","D5","Dichloroethane","Ethanol","EthylBenzene","Ethylene","EthyleneOxide","Fluorine","HFE143m","HeavyWater","Helium","Hydrogen","HydrogenChloride","HydrogenSulfide","IsoButane","IsoButene","Isohexane","Isopentane","Krypton","MD2M","MD3M","MD4M","MDM","MM","Methane","Methanol","MethylLinoleate","MethylLinolenate","MethylOleate","MethylPalmitate","MethylStearate","Neon","Neopentane","Nitrogen","NitrousOxide","Novec649","OrthoDeuterium","OrthoHydrogen","Oxygen","ParaDeuterium","ParaHydrogen","Propylene","Propyne","R11","R113","R114","R115","R116","R12","R123","R1233zd(E)","R1234yf","R1234ze(E)","R1234ze(Z)","R124","R1243zf","R125","R13","R134a","R13I1","R14","R141b","R142b","R143a","R152A","R161","R21","R218","R22","R227EA","R23","R236EA","R236FA","R245ca","R245fa","R32","R365MFC","R40","R404A","R407C","R41","R410A","R507A","RC318","SES36","SulfurDioxide","SulfurHexafluoride","Toluene","Water","Xenon","cis-2-Butene","m-Xylene","n-Butane","n-Decane","n-Dodecane","n-Heptane","n-Hexane","n-Nonane","n-Octane","n-Pentane","n-Propane","n-Undecane","o-Xylene","p-Xylene","trans-2-Butene","1-Butene"
            ]
        const fluidNameListZh = [
                "丙酮","空气","氨","氩","苯","二氧化碳","一氧化碳","硫化羰","环己烷","环丙烷","环戊烷","D4","D6","氘","乙醚","碳酸二甲酯","二甲醚","乙烷","D5","二氯乙烷","乙醇","乙苯","乙烯","环氧乙烷","氟","HFE143m","重水","氦","氢","氯化氢","硫化氢","异丁烷","异丁烯","异己烷","异戊烷","氪","MD2M","MD3M","MD4M","MDM","MM","甲烷","甲醇","亚油酸甲酯","亚麻酸甲酯","油酸甲酯","棕榈酸甲酯","硬脂酸甲酯","氖","新戊烷","氮气","一氧化二氮","Novec649","正氘","正氢","氧气","仲氘","仲氢","丙烯","丙炔","R11","R113","R114","R115","R116","R12","R123","R1233zd(E)","R1234yf","R1234ze(E)","R1234ze(Z)","R124","R1243zf","R125","R13","R134a","R13I1","R14","R141b","R142b","R143a","R152A","R161","R21","R218","R22","R227EA","R23","R236EA","R236FA","R245ca","R245fa","R32","R365MFC","R40","R404A","R407C","R41","R410A","R507A","RC318","SES36","二氧化硫","六氟化硫","甲苯","水","氙","顺式-2-丁烯","间二甲苯","正丁烷","正癸烷","正十二烷","正庚烷","正己烷","正壬烷","正辛烷","正戊烷","正丙烷","正十一烷","邻二甲苯","对二甲苯","反式-2-丁烯","1-丁烯"
            ];

        (()=>{
            const datalist = document.getElementById("fluidName-datalist")
            fluidNameListZh.forEach(opt => {
                datalist.append(new Option(opt))
            })

            let ioArgs = []
            for (const key in param) {
                if (Object.prototype.hasOwnProperty.call(param, key)) {
                    if (param[key].io == 'IO') {
                        ioArgs.push({value: key, text:param[key].text_zh}) 
                    }
                }
            }
            
            const arg1Sel = document.getElementById("arg1")
            arg1Sel.innerHTML = "<option disabled selected>请选择</option>"
            addOptions(arg1Sel, ioArgs)
            arg1Sel.addEventListener('change', onArg1Change)
            document.getElementById('arg2').addEventListener('change', onArg2Change)
            document.getElementById("cal").addEventListener('click',onCalBtnClick)
            document.getElementById("arg1-unit").addEventListener('change', onArgUnitChange)
            document.getElementById("arg2-unit").addEventListener('change', onArgUnitChange)
        })();

        function addOptions(ele, opts) {
            opts.forEach(opt => {
                if (typeof opt == "object") {
                    ele.add(new Option(opt.text, opt.value))
                } else {
                    ele.add(new Option(opt, opt))
                }
            });
        }

        function onArg1Change() {
            const arg1UnitSel = document.getElementById("arg1-unit")
            arg1UnitSel.options.length = 0
            let unit = param[this.value].unit
            if (unit) {
                addOptions(arg1UnitSel, getUnitSetKey(unit) ? Object.keys(Unit[getUnitSetKey(unit)]) : [unit])
                arg1UnitSel.value = unit
                arg1UnitSel.setAttribute('data-pre-unit', unit) 
                arg1UnitSel.hidden = false
            } else {
                arg1UnitSel.hidden = true
            }

            const arg2Sel = document.getElementById("arg2")
            arg2Sel.disabled = false
            arg2Sel.options.length = 0
            let opt1 = new Option('请选择')
            opt1.disabled = true
            opt1.selected = true
            arg2Sel.add(opt1)
            let ioArgs = []
            for (const key in param) {
                if (Object.prototype.hasOwnProperty.call(param, key)) {
                    if (param[key].io == 'IO' && key != this.value) {
                        ioArgs.push({value: key, text:param[key].text_zh}) 
                    }
                }
            }
            addOptions(arg2Sel, ioArgs)

        }

        function onArg2Change() {
            const arg2UnitSel = document.getElementById("arg2-unit")
            arg2UnitSel.options.length = 0
            let unit = param[this.value].unit
            if (unit) {
                addOptions(arg2UnitSel, getUnitSetKey(unit) ? Object.keys(Unit[getUnitSetKey(unit)]) : [unit])
                arg2UnitSel.value = unit
                arg2UnitSel.setAttribute('data-pre-unit', unit)
                arg2UnitSel.hidden = false
            } else {
                arg2UnitSel.hidden = true
            }
        }

        function onArgUnitChange() {
            const parent = this.parentNode
            const input = parent.getElementsByTagName('input')[0]
            let value = Number(input.value)
            console.log(input);
            
            value = unitConverter(value, this.dataset.preUnit, this.value)
            input.value = value
            this.setAttribute('data-pre-unit', this.value)
        }

        function onCalBtnClick() {
            const fluidName = fluidNameList[fluidNameListZh.indexOf(document.getElementById("fluidName").value)]
            let arg1 = document.getElementById("arg1").value
            let v1 = Number(document.getElementById("arg1-value").value)
            let unit1 = document.getElementById("arg1-unit").value
            if ('P' == arg1) {
                v1 = unitConverter(v1, unit1, 'PaA')
            } else {
                v1 = unitConverter(v1, unit1, 'baseUnit')
            }

            let arg2 = document.getElementById("arg2").value
            let v2 = Number(document.getElementById("arg2-value").value)
            let unit2 = document.getElementById("arg2-unit").value
            if ('P' == arg2) {
                v2 = unitConverter(v2, unit2, 'PaA')
            } else {
                v2 = unitConverter(v2, unit2, 'baseUnit')
            }
            
            console.log(v2);
            const resEle = document.getElementById("res")
            resEle.innerHTML = ''
            Object.keys(param).forEach(key => {
                const row = document.createElement('p')
                const nameSpan = document.createElement('span')
                nameSpan.innerText = param[key].text_zh
                row.appendChild(nameSpan)
                const valueSpan = document.createElement('span')
                valueSpan.innerText = Module.PropsSI(key,arg1,v1,arg2,v2,fluidName)
                row.appendChild(valueSpan)
                if (param[key].unit != '') {
                    const unitSel = document.createElement('select')
                    addOptions(unitSel, getUnitSetKey(param[key].unit) ? Object.keys(Unit[getUnitSetKey(param[key].unit)]) : [param[key].unit])
                    unitSel.value = param[key].unit
                    unitSel.setAttribute('data-pre-unit', unitSel.value)
                    unitSel.addEventListener('change', onResUnitChange)
                    row.appendChild(unitSel)
                }
                
                resEle.appendChild(row)
            })
        }

        function onResUnitChange() {
            const parent = this.parentNode
            const span = parent.getElementsByTagName('span')[1]
            console.log((parent.getElementsByTagName('span')[1]).textContent);
            let value = Number(span.textContent)
            
            value = unitConverter(value, this.dataset.preUnit, this.value)
            span.innerText = value
            this.setAttribute('data-pre-unit', this.value)
        }

        function getUnitSetKey(unit) {
            for (let key in Unit) {
                if (Unit[key].hasOwnProperty(unit)) {
                    return key
                }
            }
            return false
        }       
    </script>
</body>
</html>